<template>
  <layout-basic-page is-full-height>
    <cs-list-page
      :data="tableData"
      :search-items="searchItems"
      :query="query"
      :table-columns="tableColumns"
      label-position="right"
      :total="total"
      :row-actions="rowActions"
      auto-max-height
      @search="onSearch"
    >
      <template #function>
        <el-button type="primary">
          新建
        </el-button>
        <el-button type="danger">
          删除
        </el-button>
      </template>
    </cs-list-page>
    <cs-dialog
      v-model:visible="visible"
      title="cs"
    />
  </layout-basic-page>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { CsListPageProps, CsTableColumnProps } from 'csui'

  defineOptions({ name: 'Fun1' })

  const tableDataAll = [
    {
      name: '章三',
      sex: '男',
      age: 18,
      address: '广东省广州市'
    },
    {
      name: '里斯',
      sex: '女',
      age: 20,
      address: '广东省广州市'
    },
    {
      name: '王武',
      sex: '男',
      age: 16,
      address: '广东省广州市'
    }
  ]
  const visible = ref(false)
  const rowActions: CsListPageProps['rowActions'] = [
    {
      label: '查看明细',
      click: () => {
        visible.value = true
      }
    }
  ]
  const tableData = ref<typeof tableDataAll>([])
  const tableColumns: CsTableColumnProps[] = [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '地址',
      prop: 'address',
      width: 100
    }
  ]

  const total = ref(3)
  const query = ref<{ name?: string, sex?: string }>({})
  const searchItems: CsListPageProps['searchItems'] = [
    {
      label: '性别',
      prop: 'sex',
      component: 'cs-select',
      props: {
        options: ['男', '女']
      }
    },
    {
      label: '姓名姓名姓名姓名姓名姓名123',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名姓名姓名姓名姓名',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名姓名姓名',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名姓名',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名姓名姓名姓名姓名姓名123',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名',
      prop: 'name',
      component: 'el-input'
    },
    {
      label: '姓名',
      prop: 'name',
      component: 'el-input'
    }
  ]

  const onSearch = async (currentQuery: typeof query.value) => {
    const { name, sex } = currentQuery
    tableData.value = tableDataAll.filter(o => {
      return (!name || o.name.match(name)) && (!sex || o.sex === sex)
    })
  }
</script>
